<template>
  <el-container>
    <el-aside width="300px">
      <div class="logo" :style="`height:${hsize}`">
        <img src="@/assets/img/favicon.png" alt="" srcset="" />
        <span>XXXX商城管理系统</span>
      </div>
      <el-menu
        :default-active=" $route.path "
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
      >
        <el-submenu v-for="pm in menus" :key="pm.id" :index=" pm.id+'' " >
          <template #title> <i class="iconfont" :class=" pm.path "></i>{{ pm.authName }}</template>
          <el-menu-item v-for="cm in pm.children" :key="cm.id" :index=" '/home/'+cm.path ">
            <template #title>
              <i class="el-icon-menu"></i>
              {{ cm.authName }}
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header :height="hsize">
        <el-button class="menu-btn" size="medium">
          <i class="el-icon-s-fold"></i>
        </el-button>
        <el-dropdown>
          <span class="user-link">
            <img class="user" src="@/assets/img/user.jpg" alt="" />
            <span>admin</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <template  v-for="(item,i) in $route.meta.names" >
            <el-breadcrumb-item v-if="item.name" :to="item" :key="i">{{ item.title }}</el-breadcrumb-item>
            <el-breadcrumb-item v-else :key="i">{{ item.title }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
        <router-view class="content"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      hsize: "60px",
      menus:[]
    };
  },
  methods:{
    async loadMenus(){
      try {
        let menus = await this.$api.getMenus()
        // console.log(menus);
        if(menus){
          this.menus = menus;
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created(){
    this.loadMenus();
  }
};
</script>

<style lang="less" scoped>
.logo {
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
  > img {
    height: 100%;
    padding: 6px;
    box-sizing: border-box;
    vertical-align: middle;
  }
  > span {
    vertical-align: middle;
    font-size: 24px;
    color: white;
  }
}
.menu-btn {
  padding: 4px 10px !important;
  font-size: 20px;
}
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #545c64;
  .el-menu{
    border: unset;
  }
}
.el-header {
  box-shadow: 0px 0px 8px #545c64;
  position: relative;
  z-index: 4;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.el-dropdown {
  cursor: pointer;
  .user-link > * {
    vertical-align: middle;
  }
  .user {
    height: 40px;
    width: 40px;
    margin-right: 4px;
  }
}
.el-main {
  background-color: #efefef;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  .content{
    flex-grow: 1;
    overflow: hidden;
  }
}
.el-breadcrumb{
  margin-bottom: 20px;
}
</style>
